<template>
  <div class="wrapper">
    <div
      class="tabItem"
      :class="{'active':checkIndex===index}"
      v-for="(item,index) in tabList"
      :key="index"
      @click="checkTab(index)"
    >{{item}}</div>
  </div>
</template>

<script>
export default {
    name: "headTab",
    props: {
        checkIndex: {
            type: [String, Number],
        },
    },
    data() {
        return {
            tabList: ["样式", "数据"],
            checkIndex: this.checkIndex,
        };
    },
    methods: {
        checkTab(index) {
            this.checkIndex = index;
            this.$emit("checkTabChange", this.checkIndex);
        },
    },
};
</script>

<style scoped lang="less">
.wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #eee;
    .tabItem {
        padding: 15px;
        cursor: pointer;
    }
    .active {
        border-bottom: 2px solid #5794f5;
    }
}
</style>